<template>
  <div class="board-catalog" v-loading="loading">
    <div class="board-catalog-left">
      <div class="header-group">
        <div class="work-title">
          <span>板材目录</span>
          <el-button size="small">增加目录</el-button>
        </div>
        <div class="search-input">
          <el-input
            placeholder="检索板材名称"
            v-model="keyword"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="board-list-group">
        <div class="add-span">
          <div class="tree-left">
            <img class="tree-img" :src="file" />
            <span class="tree-title">材料</span>
          </div>
          <div>
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="tree-more el-icon-more"></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ type: 1 }">编辑</el-dropdown-item>
                <el-dropdown-item :command="{ type: 2 }">修改</el-dropdown-item>
                <el-dropdown-item :command="{ type: 3 }">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div class="board-catalog-right">
      <div class="board-catalog-right-header">
        <div class="right-header-img">
          <img class="right-header-imgs" :src="file" />
        </div>
        <div class="right-header-info">
          <div class="header-info-text">冷砸缸</div>
          <div class="header-info-text">冷砸缸</div>
        </div>
      </div>
      <div class="board-table"> 
        <div class="board-table-header">
          <div class="board-table-col">厚度(mm)</div>
          <div class="board-table-col">斜料</div>
          <div class="board-table-col">标材</div>
        </div>
        <div class="board-body">
          <div class="board-table-list board-table-list-active">
            <div class="board-table-col">11</div>
            <div class="board-table-col">11</div>
            <div class="board-table-col">11</div>
          </div>
          <div class="board-table-list">
            <div class="board-table-col">11</div>
            <div class="board-table-col">11</div>
            <div class="board-table-col">11</div>
          </div>
        </div>
      </div>
      <div class="board-table-button">
        <el-button size="small">增加目录</el-button>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600"
      append-to-body
      :close-on-click-modal="false"
      top="1.5%"
      v-loading="dialogLoading"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        label-position="left"
      >
        <el-form-item label="发布名称" prop="contentName">
          <el-input
            v-model.trim="form.contentName"
            placeholder="请输入发布名称"
          />
        </el-form-item>
        <el-form-item label="信息选择" prop="contentId">
          <el-select v-model="form.contentId" placeholder="请选择">
            <el-option
              v-for="(item, index) in messageList"
              :key="index"
              :label="item.contentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备选择" prop="deviceId">
          <el-select v-model="form.deviceId" placeholder="请选择">
            <el-option
              v-for="(item, index) in deviceList"
              :key="index"
              :label="item.deviceName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-debounce-click="submitForm"
          >确 定</el-button
        >
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import file from '@/assets/img/file_icon.png';
import files from '@/assets/img/files_icon.png';
export default {
  name: 'Workcatalog',
  props: {
    imgUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      file: file,
      files: files,
      messageList: [],
      keyword: '',
      dialogLoading: false,
      deviceList: [],
      loading: false,
      open: false,
      title: '新增',
      form: {
        contentId: '', //发布信息
        contentName: '', //信息名称
        deviceId: '', //发布设备
      },
      // 表单校验
      rules: {
        contentName: [
          { required: true, message: '信息名称不能为空', trigger: 'blur' },
        ],
        contentId: [
          { required: true, message: '请选择信息', trigger: 'change' },
        ],
      },
    };
  },
  watch: {
    imgUrl: function (val, oldVal) {
      if (val != oldVal) {
        this.imgModelUrl = val;
      }
    },
  },
  created() {
    this.initAjaxMethod()
  },
  methods: {
    initAjaxMethod() {
      this.loading = true;
      this.$http
        .get(this.$API.MATERIA)
        .then((res) => {
          this.loading = false;
          let list = Array.isArray(res.data) ? res.data : [];
          this.treeData = list;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleCommand(command) {
      let type = command && command.type ? Number(command.type) : 0;
      if (type === 1) {
        this.resetMetod(command.data, 1);
      } else if (type === 2) {
        this.resetWorkMetod(command.data,1)
      } else if (type === 3) {
        if(command.data.nodeType === 0){
          this.resetMetod(command.data, 2);
        }else{
          this.resetWorkMetod(command.data,2)
        }
      } else if (type === 4) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.remove(command.data.id,command.data.nodeType)
        });
      }
    },

    remove(id,type) {
      this.loading = true;
      let path=type === 0?this.$API.WORK_CALALOG_BATH:this.$API.WORK_TASK;
      this.$http
        .del(path + '/' + id)
        .then((res) => {
          this.loading = false;
          this.$message.success('操作成功');
          this.initAjaxMethod();
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    resetMetod(row = null, flag = 1) {
      let form = {
        name: flag === 2 ? (row ? row.name : '') : ''
      };
      if (flag === 1 && row.parentId && isString(row.parentId)) {
        form.parentId = row.parentId;
      }
      if (flag === 2) {
        form.id = row.id;
      }
      console.log('form', form);
      this.form = form;
      this.title = row ? "修改目录" : "添加目录";
      this.open = true;
      this.$nextTick(() => {
        this.$refs['form'].clearValidate();
        this.dialogLoading = false;
      })
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.dialogLoading = true;
          if (isString(this.form.id)) {
            this.$http.put(this.$API.WORK_CALALOG_BATH+'/'+this.form.id, this.form, {
              headers: { 'Content-Type': 'application/json' }
            }).then((response) => {
              this.$message.success('修改成功');
              this.open = false;
              this.dialogLoading = false;
              this.initAjaxMethod();
            })
          }else{
            this.$http.post(this.$API.WORK_CALALOG_BATH, this.form, {
              headers: { 'Content-Type': 'application/json' }
            }).then((response) => {
              this.$message.success('修改成功');
              this.open = false;
              this.dialogLoading = false;
              this.initAjaxMethod();
            })
          }

        }
      });
    },
    submitWorkForm() {
      this.$refs["workform"].validate((valid) => {
        if (valid) {
          this.dialogworkLoading = true;
          if (isString(this.formwork.id)) {
            this.$http.put(this.$API.WORK_TASK+'/'+this.form.id, this.formwork, {
              headers: { 'Content-Type': 'application/json' }
            }).then((response) => {
              this.$message.success('修改成功');
              this.openwork = false;
              this.dialogworkLoading = false;
              this.initAjaxMethod();
            })
          }else{
            this.$http.post(this.$API.WORK_TASK, this.formwork, {
              headers: { 'Content-Type': 'application/json' }
            }).then((response) => {
              this.$message.success('修改成功');
              this.openwork = false;
              this.dialogworkLoading = false;
              this.initAjaxMethod();
            })
          }

        }
      });
    },
    resetWorkMetod(row = null,flag) {
      let code=new Date().getTime().toString();
      let formwork = {
        code: flag === 2?(row ? row.code : code):code,
        name: flag === 2?(row ? row.name : ''):'',
        catalogId: row.id,
        userId:flag === 2?(row.userId ? row.userId : this.userInfo.id):this.userInfo.id
      };
      if (flag === 2) {
        formwork.id = row.id;
      }
      this.formwork=formwork;
      this.worktitle = flag === 2 ? "修改作业" : "添加作业";
      this.openwork = true;
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    treeChage(){
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      let checkTaskIds=checkedNodes.filter(item=>item.nodeType === 1);
      console.log('checkTaskIds',checkTaskIds)
      this.$store.dispatch('app/setCheckTasks',checkTaskIds)
      this.$store.dispatch('app/setCheckTaskIds',checkTaskIds.map(o=>o.id))
    }
  },
};
</script>
<style lang="less">
.board-catalog {
  background: #fafafa;
  box-shadow: 1px 1px 4px -3px #000;
  display: flex;
  .board-catalog-left{
    width: 50%;
    padding: 10px 10px 10px 0;
    height: 94vh;
  }
  .board-catalog-right{
    width: 50%;
    border-left:1px solid #999;
    padding:0 5px;
    .board-catalog-right-header{
      padding:10px 0;
      display: flex;
      align-items: center;
      .right-header-imgs{
        width: 40px;
        height: 40px;
      }
      .right-header-info{
        padding-left: 20px;
        .header-info-text{
          padding:4px 0;
          font-size: 14px;
        }
      }
    }
    .board-table{
      .board-table-header{
        display: flex;
        align-items: center;
        padding:5px 0;
      }
      .board-body{
         max-height: 70vh;
      }
      .board-table-list{
        display: flex;
        align-items: center;
        padding:10px 0;
      }
      .board-table-col{
        text-align: center;
        padding:0 4px;
        font-size: 14px;
        width: 33.33%;
      }
      .board-table-list-active{
        background: #409EFF;
        .board-table-col{
          color:#fff;
        }
      }
    } 
    .board-table-button{
        display: flex;
        align-items: center;
        justify-content: center;
        padding:15px 0;
      }
  }
  .work-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #000;
  }
  .search-input {
    padding: 10px 0;
  }
  .board-list-group {
    padding: 5px 0;
  }
  .add-span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tree-left {
      width: 85%;
      display: flex;
      align-items: center;
      .tree-img {
        width: 26px;
        height: 26px;
        width: auto;
      }
      .tree-title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        color: #333;
        padding-left: 4px;
      }
    }
    .tree-more {
      font-size: 14px;
      color: #333;
      width: 26px;
      height: 20px;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .el-tree-node__content .el-checkbox__input.is-disabled {
    display: none;
  }
}
</style>
